<template>
  <div class="record_clean_room">
    <el-dialog
      title="作业环境记录"
      width="450px"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog"
      @closed="closeDialog">
      <p class="date_panel">当前日期: {{currentDate}}</p>
      <el-form ref="listForm" @submit.native.prevent :model="recordData" :rules="rules" v-if="dialogTableVisible">
        <el-form-item class="form_item" label="洁净间房间号:" prop="roomNumberId">
          <div class="input_panel_row">
            <div class="input_item">
              <el-select
                class="select_input_panel"
                v-model="recordData.roomNumberId"
                placeholder="请选择房间号"
                size="small">
                <el-option
                  v-for="item in cleanRooms"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="form_item" label="温度:" prop="temperature">
          <div class="input_panel_row">
            <div class="input_item">
              <el-input
                placeholder="请输入温度值"
                class="number_input_panel"
                size="small"
                v-model="recordData.temperature">
              </el-input>
              <span class="unit_panel">℃</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="form_item" label="湿度:" prop="humidity">
          <div class="input_panel_row">
            <div class="input_item">
              <el-input
                placeholder="请输入湿度值"
                class="number_input_panel"
                size="small"
                v-model="recordData.humidity">
              </el-input>
              <span class="unit_panel">%</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="form_item" label="洁净度:" prop="cleanliness">
          <div class="input_panel_row">
            <div class="input_item">
              <el-input
                placeholder="请输入洁净度"
                class="number_input_panel"
                size="small"
                v-model="recordData.cleanliness">
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="form_item" label="备注:" prop="remarks">
          <div class="input_panel_row">
            <div class="input_item">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入备注"
                v-model="recordData.remarks"
                maxlength="255">
              </el-input>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button type="primary" @click="submitData()">提交</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {isPosInteger, isNumber} from '@/utils/validate'
export default {
  name: 'RecordCleanRoom',
  data() {
    return {
      dialogTableVisible: false,
      // 记录参数
      recordData: {
        temperature: '',
        cleanliness: '',
        humidity: '',
        remarks: ''
      },
      saveStatus: true, // 提交状态
      rules: {
        roomNumberId: [
          {required: true, message: '房间号不能为空', trigger: 'change'},
        ],
        temperature: [
          {required: true, message: '温度不能为空', trigger: 'blur'},
          {validator: isNumber, message: '温度必须是数字', trigger: 'blur'},
          {validator: this.valiFigure, message: '温度最多3位整数+1位小数', trigger: 'blur'},
        ],
        humidity: [
          {required: true, message: '湿度不能为空', trigger: 'blur'},
          {validator: isNumber, message: '湿度必须是数字', trigger: 'blur'},
          {validator: this.valiPos, message: '湿度必须是正数', trigger: 'blur'},
          {validator: this.valiOverHounred, message: '湿度不能大于100', trigger: 'blur'},
          {validator: this.valiFigure, message: '湿度最多1位小数', trigger: 'blur'},
        ],
        cleanliness: [
          {required: true, message: '洁净度不能为空', trigger: 'blur'},
          {validator: isPosInteger, message: '洁净度必须是正整数', trigger: 'blur'},
          {validator: this.valiFigure, message: '洁净度最多为3位正整数', trigger: 'blur'},
        ],
        remarks: [
          {max: 255, message: '备注长度不能超过255字符', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    currentDate() {
      return this.moment(window.serverTime).format('YYYY-MM-DD')
    },
    cleanRooms() {
      return this.$store.state.dict.CleanRoom.labels || []
    },
  },
  methods: {
    openDialog() {
      this.dialogTableVisible = true
      this.saveStatus = true
    },
    // 获取当天时间区间
    getCurrentDaySlot() {
      return {
        beginCreateDate: this.moment(window.serverTime).startOf('day').unix() * 1000,
        endCreateDate: this.moment(window.serverTime).endOf('day').unix() * 1000
      }
    },
    // 提交数据
    submitData() {
      this.$refs['listForm'].validate((valid) => {
        if (valid) {
          if (!this.saveStatus) return
          this.saveStatus = false
          this.recordData.temperature = String(this.recordData.temperature)
          let postData = Object.assign(this.getCurrentDaySlot(), this.recordData)
          this.$store.dispatch('saveData', {
            method: 'post',
            url: 'a/cleanroomrecord/cleanRoomRecord/saveCleanRoomRecord',
            data: {cleanRoomRecordList: [postData]},
            noCommit: true
          }).then(() => {
            this.tipMessage('success', '保存成功')
            this.dialogTableVisible = false
          }).catch(() => {
            this.saveStatus = true
          })
        }
      })
    },
    /**
     * 验证是否为正数
     * @param rule
     * @param number
     * @param callback
     */
    valiPos(rule, num, callback) {
      const number = Number(num)
      if (number < 0) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    },
    /**
     * 验证位数是否为最多3位整数、1位小数
     * @param rule
     * @param number
     * @param callback
     */
    valiFigure(rule, num, callback) {
      if (this.valiNumber(num, 3, 1)) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    },
    /**
     * 验证位数是否为最多3位整数、1位小数
     * @param rule
     * @param number
     * @param callback
     */
    valiOverHounred(rule, num, callback) {
      if (Number(num) > 100) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    },
    /**
     * 验证数字数位
     * @param num 需要验证的数字
     * @param int 数字整数位最大位数
     * @param dec 数字小数位最大位数
     */
    valiNumber(num, int, dec) {
      const number = Math.abs(Number(num))
      const str = String(number).split('.')
      const intStr = str[0]
      const decStr = str[1] || ''
      return intStr.length > int || decStr.length > dec
    },
    // 关闭弹窗
    closeDialog() {
      this.recordData = {
        temperature: '',
        cleanliness: '',
        humidity: '',
        remarks: ''
      }
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .record_clean_room {
    .date_panel {
      text-align: right;
      margin-bottom: 10px;
    }
    .input_panel_row{
      display: flex;
      justify-content: space-between;
      .input_title{
        text-align: right;
        line-height: 32px;
        display: inline-block;
        width: calc(100% - 300px);
        padding-right: 6px;
        .is_required{
          color: #f8000f;
          padding-right: 4px;
          font-style: normal;
        }
      }
      .input_item{
        width: 300px;
        display: flex;
        align-items: center;
        .unit_panel {
          display: block;
          width: 40px;
          text-align: center;
          line-height: 32px;
          background-color: #f2f5f9;
        }
      }
      .el-select{
        width: 100%;
      }
    }
    .el-form-item{
      .el-form-item__label{
        width: calc(100% - 300px)!important;
      }
      .el-form-item__error{
        padding-left: calc(100% - 300px)!important;
      }
    }
  }
</style>
